<template>
  <div class="home">
    <h1>This is A Vuex Demo</h1>
    <el-row>
      <el-col :span=12>
        <!--card-name 和 count-rate传给子组件数据,记得格式-->
        <rate-card
          card-name="Demo of Module A"
          :count-rate="countA"
          @add="addA"
          @sub="subClickA"
        ></rate-card>
      </el-col>
      <el-col :span=12>
        <rate-card
          card-name="Demo of Module B"
          :count-rate="countB"
          @add="addB"
          @sub="subB"
        ></rate-card>
      </el-col>
    </el-row>
    <div class="next">
      <el-button
        type="warning"
        circle
        @click="getName1"
      >获取Vuex里的数据
      </el-button>
      <span>{{ userName }}</span>
    </div>
  </div>
</template>

<script>
    import RateCard from "@/components/RateCard";
    import {mapGetters, mapMutations, mapActions} from 'vuex'

    export default {
        name: "home",
        data() {
            return {
                dataList: []
            }
        },
        created() {
            // 使用 process.env.[name] 进行访问env配置的变量
            console.log(process.env); //显示当前的环境的变量对应模式的配置文件
            // console.log(process.env.VUE_APP_BASE_API);  // 打印出来当前环境的变量对应到.evn文件
            // console.log(process.env)
        },
        methods: {
            // 执行moduleA下的add方法等同于执行moduleA下的this.$store.commit('add')
            // addA方法绑定到rate-card组件,让子组件调用执行vuex里的数据
            ...mapMutations('moduleA', {
                addA: "add"
            }),
            // ...mapMutations('moduleA', {
            //     subA: 'sub'
            // }),
            ...mapMutations('moduleB', {
                addB: 'add'
            }),
            ...mapMutations('moduleB', {
                subB: 'sub'
            }),
            // 执行vuex里的异步方法subClick,里面再调用sub 具体看vuex里moduleA
            ...mapActions('moduleA', {
                subClickA: 'subClick'
            }),
            // 下面的2段代码相当于方法里 this.$store.dispatch('getName',"李哲"),这里使用mapActions的方式
            // 执行vuex里的异步方法,传参
            ...mapActions('moduleA', {
                nameA: 'getName'
            }),
            getName1() {
                this.nameA('李哲')
            },
            // 执行moduleA下的subClick异步方法。异步方法里再去调用sub进行--
            getMethod() {
                // 获取mock数据
                this.$api.get('/data/testData', null, Responce => {
                    this.dataList = Responce;
                })
            }
        },
        components: {
            RateCard
        },
        computed: {
            // 使用这种方式得namespaced: false,或者注释
            // countA(){
            //     return this.$store.getters.getCountA
            // },
            // countB(){
            //     return this.$store.getters.getCountB
            // }

            // 使用语法糖mapGetters等方式,分模块的话需要开启namespaced: true,只能写在计算属性里！！
            ...mapGetters('moduleA', {
                countA: "getCountA"
            }),
            ...mapGetters('moduleB', {
                countB: "getCountB"
            }),
            ...mapGetters('moduleA', {
                userName: "getUserName"
            })
        }
    }
</script>

<style lang="scss" scoped>
  .home {
    text-align: center;
    .next{
      margin-top: 50px;
    }
  }


</style>
